// 路由组件的三种渲染方式

import React, { Component } from 'react';
import { NavLink, Route, withRouter, Switch } from 'react-router-dom'
import Home from '../views/router-view/Home';
import Category from '../views/router-view/Category';
import Cat from '../views/router-view/Cat';
import Mine from '../views/router-view/Mine';
import Notfind from '../views/router-view/Notfind';


class Index1 extends Component {
    render() {
        return (
            <div>
                <NavLink to='/home'>首页</NavLink>
                <NavLink to='/category'>分类</NavLink>
                <NavLink to='/cat'>购物车</NavLink>
                <NavLink to='/mine'>我的页</NavLink>

                {/* 渲染组件 */}
                {/* 方式1: 最常用方式  component={组件名} */}
                {/* <Route path='/home' component={Home}></Route> */}
                {/* 方式1: 函数方式 component={()=><Home/>}: 
                    注意: 该种方式,匹配后的组件会丢失props属性
                 */}
                {/* <Switch> */}
                <Route path='/home' component={(props) => <Home {...props} />}></Route>
                {/* 方式2: 使用render属性渲染组件(不常用) */}
                <Route path='/category' render={(props) => <Category {...props}></Category>}></Route>
                {/* 方式3: 使用children 属性渲染组件: 
                    // children 的值为标签组件的时候, 默认没有props, 使用 {...this.props}. 继承父组件中的props
                    // 前提保证父组件有该props,如果父组件没有使用withRouter处理
                 */}
                <Route path='/cat' children={<Cat {...this.props}></Cat>}></Route>
                {/*方式3:使用children 属性渲染组件:
                   注意: 当children 属性为函数的写法渲染组件时, 无论path地址匹不匹配,都会渲染该组件
                    // 解决方案1: 使用Switch 包裹
                    // 解决方案2: 
                 */}
                <Route path='/mine' children={(props) => {
                    // 当路径path 匹配则match 对应不为null,否则为null,根据该特点, 实现组件的匹配
                    if (props.match) {
                        return <Mine {...props}></Mine>
                    }
                }}></Route>
                {/* </Switch> */}
            </div>
        );
    }
}

export default withRouter(Index1);
